{extend name="base"/}
{block name="title"}命令模式3{/block}
{block name="resource"}
<style>
    .ball{
        position: absolute;
        width: 50px;
        height:50px;
        border-radius: 50%;
        background: red;
        left:0;
        top:50px;
    }
</style>
{/block}
{block name="body"}
<div>
    <input type="text" id="pos">
    <button id="move">移动</button>
    <button id="cancel">撤销</button>
</div>
<div class="ball" id="ball"></div>
{/block}
{block name="script"}
<script src="ROOT_PATH/static/js/admin/learn/Animate.js"></script>
<script>


    var ball = document.getElementById('ball');
    var pos = document.getElementById('pos');
    var moveBtn = document.getElementById('move');
    var cancelBtn = document.getElementById('cancel');

    var MoveCommand = function(receiver, pos){
        this.reveiver = receiver;
        this.pos = pos;
        this.oldPos = null;
    }
    MoveCommand.prototype.execute = function(){
        this.reveiver.start('left', this.pos, 1000, 'strongEaseOut');
        this.oldPos = this.reveiver.dom.getBoundingClientRect()[this.reveiver.propertyName];
    }

    MoveCommand.prototype.undo = function(){
        this.reveiver.start('left', this.oldPos, 1000, 'strongEaseOut');
    }

    var moveCommand;
    moveBtn.onclick = function(){
        var animate = new Animate(ball);
        console.log(animate);
        moveCommand = new MoveCommand(animate, pos.value);
        moveCommand.execute();
    }

    cancelBtn.onclick = function(){
        moveCommand.undo();
    }

</script>
{/block}

